<template>
  <el-drawer
    v-model="visible"
    title="入库单详情"
    size="600px"
    @close="handleClose"
    class="inbound-detail-drawer"
  >
    <div class="inbound-detail" v-if="inboundOrder">
      <!-- 基本信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">入库单号:</span>
              <span class="value">{{ inboundOrder.inboundNumber }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">供应商:</span>
              <span class="value">{{ inboundOrder.supplierName }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">入库日期:</span>
              <span class="value">{{ formatDate(inboundOrder.inboundDate) }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">发票状态:</span>
              <span class="value">
                <el-tag :type="getInvoiceStatusType(inboundOrder.invoiceStatus)" class="status-tag">
                  {{ getInvoiceStatusText(inboundOrder.invoiceStatus) }}
                </el-tag>
              </span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">运费:</span>
              <span class="value">¥{{ formatCurrency(inboundOrder.freight) }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">总金额:</span>
              <span class="value total-amount">¥{{ formatCurrency(inboundOrder.totalAmount) }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="detail-item">
              <span class="label">备注:</span>
              <span class="value">{{ inboundOrder.remark || '-' }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>
      
      <!-- 商品明细 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>商品明细</span>
          </div>
        </template>
        
        <el-table :data="inboundOrder.items" style="width: 100%" class="items-table">
          <el-table-column prop="productName" label="商品名称" min-width="150" />
          <el-table-column prop="specification" label="规格" width="120" />
          <el-table-column prop="quantity" label="数量" width="80" />
          <el-table-column prop="unitPrice" label="单价" width="100">
            <template #default="{ row }">
              ¥{{ formatCurrency(row.unitPrice) }}
            </template>
          </el-table-column>
          <el-table-column label="金额" width="100">
            <template #default="{ row }">
              ¥{{ formatCurrency(row.quantity * row.unitPrice) }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      
      <!-- 操作记录 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>操作记录</span>
          </div>
        </template>
        
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :timestamp="activity.timestamp"
            placement="top"
          >
            <el-card>
              <h4>{{ activity.content }}</h4>
              <p>{{ activity.operator }} {{ activity.time }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>
    
    <template #footer>
      <div style="text-align: right">
        <el-button @click="handleClose" class="close-btn">关闭</el-button>
        <el-button type="primary" @click="handlePrint" :icon="Printer" class="print-btn">打印入库单</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Printer } from '@element-plus/icons-vue'
import { formatCurrency, formatDate } from '@/utils/formatters'

interface InboundOrderItem {
  id: number
  productName: string
  specification: string
  quantity: number
  unitPrice: number
}

interface InboundOrder {
  id: number
  inboundNumber: string
  supplierId: number
  supplierName: string
  inboundDate: string
  totalAmount: number
  hasInvoice: boolean
  invoiceStatus: string
  freight: number
  remark: string
  items: InboundOrderItem[]
}

interface Activity {
  content: string
  timestamp: string
  operator: string
  time: string
}

const props = defineProps<{
  modelValue: boolean
  inboundOrder: InboundOrder | null
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'close'): void
}>()

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 模拟操作记录
const activities = computed<Activity[]>(() => {
  if (!props.inboundOrder) return []
  
  return [
    {
      content: '创建入库单',
      timestamp: '2023-01-05',
      operator: '张三',
      time: '09:30'
    },
    {
      content: '审核通过',
      timestamp: '2023-01-05',
      operator: '李四',
      time: '10:15'
    },
    {
      content: '完成入库',
      timestamp: '2023-01-05',
      operator: '王五',
      time: '14:20'
    }
  ]
})

const handleClose = () => {
  emit('close')
  visible.value = false
}

const handlePrint = () => {
  ElMessage.info('准备打印入库单')
  // 实际项目中需要实现打印功能
  setTimeout(() => {
    ElMessage.success('入库单已发送至打印机')
  }, 1000)
}

const getInvoiceStatusType = (status: string) => {
  switch (status) {
    case 'pending': return 'info'
    case 'received': return 'warning'
    case 'uploaded': return 'success'
    default: return 'info'
  }
}

const getInvoiceStatusText = (status: string) => {
  switch (status) {
    case 'pending': return '待开票'
    case 'received': return '已收票'
    case 'uploaded': return '已上传'
    default: return '未知'
  }
}
</script>

<style scoped>
.inbound-detail-drawer {
  border-radius: 8px 0 0 8px;
  overflow: hidden;
}

.inbound-detail {
  height: 100%;
  overflow-y: auto;
  padding: 20px;
}

.detail-card {
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.detail-card:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.detail-item {
  display: flex;
  margin-bottom: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.label {
  width: 80px;
  font-weight: bold;
  color: #606266;
}

.value {
  flex: 1;
  color: #303133;
}

.total-amount {
  font-weight: bold;
  font-size: 16px;
  color: #f56c6c;
}

.items-table {
  margin-bottom: 10px;
}

/* 标签悬停效果 */
.status-tag {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.status-tag:hover {
  transform: scale(1.05);
}

/* 按钮悬停效果 */
.close-btn,
.print-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.close-btn:hover,
.print-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 打印按钮特殊样式 */
.print-btn {
  background-color: #409eff;
  border-color: #409eff;
  color: white;
}

.print-btn:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .inbound-detail-drawer {
    width: 95% !important;
  }
  
  .detail-item {
    flex-direction: column;
    gap: 4px;
  }
  
  .label {
    width: auto;
    font-weight: 600;
  }
}
</style>